<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { getSystemInfo } from '@/utils/systemInfo.js'
import { getCommunityPostDataService } from '@/apis/list.js'
import { useUserStore } from '@/stores/index.js'
import { formatTime } from '@/utils/formatTime.js'

const UserStore = useUserStore()

// 头部导航栏高度
const navigationBarHeight = ref(0)
// 状态栏高度
const statusBarHeight = ref(0)
// 头部导航栏总高度
const navTotalHeight = ref(0)

// 头部滑动导航列表
const navList = ref([
	{ name: '全部', type: 'all' },
	{ name: '景点', type: 'scenery' },
	{ name: '酒店', type: 'hotel' },
	{ name: '餐厅', type: 'restaurant' },
	{ name: '热门', type: 'is_hot' }
])

// 页面滑动到底部时的加载状态
const status = ref('loadmore')

// 当前激活的导航栏选项
const activeIndex = ref(0)

// 当前选中的顶部选项
const selectedOption = ref('square')

// 存储获取到的攻略数据
const postList = ref([])

// 存储获取到的列表数据总数
const count = ref(null)

// 用户当前所在城市位置
const currentCity = ref(null)

// 获取攻略数据的筛选条件
const query = ref({
	filter_type: '',
	is_hot: '',
	city_id: '',
	pageSize: 5,
	page: 1
})

// 获取设备信息
const SystemInfo = async () => {
	const res = await getSystemInfo()

	// 微信小程序平台
	// #ifdef MP-WEIXIN
	navigationBarHeight.value = res.navHeight
	statusBarHeight.value = res.statusBarHeight
	navTotalHeight.value = res.navTotalHeight
	// #endif
}

// 获取社区攻略数据
const getCommunityPostData = async (is_push) => {
	const res = await getCommunityPostDataService(query.value)

	// 格式化发布时间
	res.data?.map((item) => (item.createdAt = formatTime(item.createdAt)))

	if (postList.value.length > 0 && is_push) {
		postList.value = [...postList.value, ...res.data]
	} else {
		postList.value = res.data
	}

	if (res.data.length === 0 || res.data.length < 5) {
		status.value = 'nomore'
	} else {
		// 存储数据总数
		count.value = res.count
	}
}

// 切换导航栏选项筛选数据
const onClickItem = (type, index) => {
	// 更新当前激活的导航栏选项
	activeIndex.value = index

	// 滚动到页面顶部
	uni.pageScrollTo({
		scrollTop: 0
	})

	// 清空之前的筛选项
	query.value.filter_type = ''
	query.value.is_hot = ''
	query.value.page = 1

	// 更新query筛选条件
	if (type === 'is_hot') {
		query.value.is_hot = 1
	} else if (type !== 'all') {
		query.value.filter_type = type
	}

	getCommunityPostData(false)
}

// 页面滑动到底部触发函数请求下一页数据
onReachBottom(() => {
	if (query.value.page >= Math.ceil(count.value / query.value.pageSize)) {
		if (status.value != 'nomore') {
			status.value = 'nomore'
		}
		return
	}
	status.value = 'loading'
	query.value.page++
	getCommunityPostData(true)
	setTimeout(() => {
		if (query.value.page >= Math.ceil(count.value / query.value.pageSize)) {
			status.value = 'nomore'
		} else {
			status.value = 'loading'
		}
	}, 2000)
})

// 点击攻略跳转详情页面
const onClickPost = (id) => {
	uni.navigateTo({
		url: `/ComprehensivePackage/Detail/Detail?detail_id=${id}&type=post`
	})
}

// 点击添加攻略按钮跳转发布页面
const goToPublish = () => {
	uni.navigateTo({
		url: '/ExplorePackage/Publish/Publish'
	})
}

// 点击广场显示全部攻略数据
const onClickSquare = () => {
	// 滚动到页面顶部
	uni.pageScrollTo({
		scrollTop: 0
	})

	// 更新顶部选中的选项
	selectedOption.value = 'square'

	// 显示全部攻略数据
	query.value.filter_type = ''
	query.value.is_hot = ''
	query.value.city_id = ''
	query.value.page = 1
	activeIndex.value = 0

	getCommunityPostData(false)
}

// 点击城市选择当前位置
const onClickPosition = () => {
	// 滚动到页面顶部
	uni.pageScrollTo({
		scrollTop: 0
	})

	query.value.filter_type = ''
	query.value.is_hot = ''
	query.value.city_id = ''
	query.value.page = 1
	activeIndex.value = 0
	getLocalPosition()

	if (selectedOption.value === 'position') {
		uni.navigateTo({
			url: '/ExplorePackage/Location/Location'
		})
	}

	// 更新顶部选中的选项
	selectedOption.value = 'position'
}

// 从Pinia中获取当前位置信息从而请求数据
const getLocalPosition = () => {
	if (UserStore.UserInfoList.selectedCity && UserStore.UserInfoList.selectedCityId) {
		currentCity.value = UserStore.UserInfoList.selectedCity
		query.value.city_id = UserStore.UserInfoList.selectedCityId
	} else {
		currentCity.value = UserStore.UserInfoList.city
		query.value.city_id = UserStore.UserInfoList.city_id
	}
	getCommunityPostData(false)
}

onLoad(() => {
	getCommunityPostData()
	SystemInfo()
})

onShow(() => {
	if (selectedOption.value === 'position') {
		getLocalPosition()
	}
})
</script>

<template>
	<view class="container">
		<view class="add">
			<text class="iconfont icon-fabiji" @tap="goToPublish"></text>
		</view>

		<view class="header" :style="{ paddingTop: statusBarHeight + 'rpx' }">
			<view class="top">
				<view class="square" :class="{ 'top-active,top-font': selectedOption === 'square' }" @tap="onClickSquare">广场</view>

				<!-- 当前定位城市 -->
				<view class="position" :style="{ height: navigationBarHeight + 'rpx' }" @tap="onClickPosition">
					<view class="city" :class="{ 'top-active,top-font': selectedOption === 'position' }">{{ currentCity ? currentCity : '获取定位' }}</view>
					<up-icon color="#fff" name="arrow-down-fill"></up-icon>
				</view>
			</view>

			<!-- 头部导航滑动列表 -->
			<scroll-view scroll-x class="scroll" enable-flex>
				<view class="nav-item" :class="{ active: activeIndex === index }" v-for="(item, index) in navList" :key="index" @tap="onClickItem(item.type, index)">{{ item.name }}</view>
			</scroll-view>
		</view>

		<!-- 社区内容 -->
		<view class="content">
			<view class="list-post-item" v-for="item in postList" :key="item.id" @tap="onClickPost(item.id)">
				<view class="list-item-top" v-if="item.user">
					<view class="avatar">
						<up-image :src="item.user.avatar" width="40" height="40" shape="circle"></up-image>
					</view>
					<view class="info">
						<view class="username">{{ item.user.username }}</view>
						<view class="time">{{ item.createdAt }}</view>
					</view>
				</view>
				<view class="list-item-content">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="content ellipsis-other">
						{{ item.content }}
					</view>
					<view class="image">
						<up-image mode="aspectFill" :src="item2.url" radius="10" width="100" height="100" v-for="(item2, index) in item.image" :key="index"></up-image>
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 20rpx 0">
			<up-loadmore :status="status" />
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100%;
	background-color: #fff;

	.add {
		position: fixed;
		right: 30rpx;
		bottom: 50rpx;
		z-index: 999;
		background-color: #fff;
		border-radius: 50%;

		.iconfont {
			font-size: 100rpx;
			color: #7f23d6;
		}
	}

	.header {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 999;
		background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);

		.top {
			display: flex;
			align-items: center;
			margin: 30rpx;
			margin-top: 10rpx;
			font-size: 35rpx;
			color: #fff;

			.square {
				position: relative;
			}

			.position {
				display: flex;
				align-items: center;

				.city {
					position: relative;
					margin-right: 10rpx;
					margin-left: 40rpx;
				}
			}

			.top-active::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: -20rpx;
				height: 8rpx;
				background-color: #fff;
				border-radius: 8rpx;
			}

			.top-font {
				font-size: 40rpx;
				font-weight: bold;
				transition: all 0.2s;
			}
		}

		.scroll {
			height: 100rpx;
			display: flex;
			white-space: nowrap;

			.nav-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 30rpx;
				background-color: #fff;
				padding: 35rpx;
				margin: 0 30rpx;
				border-radius: 40rpx;

				&.active {
					background-color: #7f23d6;
					color: #fff;
				}
			}
		}
	}

	.content {
		background-color: #fff;

		.list-post-item {
			height: 550rpx;
			border-radius: 30rpx;
			margin: 20rpx;
			padding: 20rpx;
			border: 4rpx solid #f5f5f5;

			.list-item-top {
				height: 100rpx;
				display: flex;
				align-items: center;

				.info {
					display: flex;
					flex-direction: column;

					.time {
						color: #666666;
					}
				}
			}

			.list-item-content {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.title {
					font-size: 30rpx;
					font-weight: bold;
				}

				.content {
					font-size: 25rpx;
					color: #666666;
					margin: 20rpx 0;
				}

				.image {
					display: flex;
					justify-content: space-around;
				}
			}
		}
	}
}
</style>
